<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #left>
        <el-form
          ref="formSearch"
          size="mini"
          :inline="true"
          :model="formSearch"
          class="demo-form-inline"
        >
          <el-form-item label="用户id">
            <el-input v-model="formSearch.user_id" style="width: 100px;" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formSearch.mobile" style="width: 120px;" />
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="formSearch.role_id" style="width: 120px">
              <el-option label="全部" value />
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.role_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="onResetForm">清空</el-button>
            <el-button type="primary" @click.prevent="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="addUser">新增城市</el-button>
      </template>
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table :data="userList" border>
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          fixed="left"
          width="60"
          sortable
        />
        <el-table-column label="店员id" prop="id" fixed="left" width="70" />
        <el-table-column label="姓名" prop="username" width="150" />
        <el-table-column label="手机号" prop="mobile" width="120" />
        <el-table-column label="性别" :formatter="formatGender" width="50" />
        <el-table-column label="店铺名称" prop="shop_name" width="50" />
        <el-table-column label="角色" width="50" :formatter="formatRole" />
        <el-table-column label="出生日期" width="110">
          <template #default="{ row }">{{ row.birthday | formatTime }}</template>
        </el-table-column>
        <el-table-column label="入店时间" width="110">
          <template #default="{ row }">{{ row.work_time | formatTime }}</template>
        </el-table-column>
        <el-table-column label="状态" width="100" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="editUser(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="formSearch.pageNum"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="formSearch.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <add-edit ref="AddEditDialog" :role-list="roleList" @refresh="getAdminUserList" />
  </div>
</template>

<script>
const formSearch = {
  user_id: '',
  mobile: '',
  pageNum: 1,
  pageSize: 10
}
import { getAdminUserList } from '@/api/admin'
import { getRoleListAll } from '@/api/role'
import CONST from '@/utils/const'
import AddEdit from './components/AddEdit.vue'
export default {
  name: 'UserList',
  components: {
    AddEdit
  },

  data() {
    return {
      formSearch: { },
      isLoading: 0,
      userList: [],
      roleList: [],
      total: 0
    }
  },
  computed: {},
  created() {
    this.initFormSearch()
    this.getRoleListAll()
    this.getAdminUserList()
  },
  mounted() {},
  methods: {
    async getRoleListAll() {
      let res = await getRoleListAll()
      res = res.filter(item => item.status === 1)
      console.log(res)
      this.roleList = res
    },
    initFormSearch() {
      this.formSearch = Object.assign({}, formSearch, this.$route.query)
      this.formSearch.pageNum = Number.parseInt(this.formSearch.pageNum)
      this.formSearch.pageSize = Number.parseInt(this.formSearch.pageSize)
    },
    changeQuery() {
      // 获取当前的query参数
      const currentQuery = this.$route.query

      // 将新的筛选条件合并到query参数中
      const newQuery = Object.assign({}, currentQuery, this.formSearch)

      // 使用Vue Router的replace方法更新URL
      this.$router.replace({ query: newQuery })
    },
    onResetForm() {
      this.formSearch = { ...formSearch }
      this.changeQuery()
      this.getAdminUserList()
    },
    onSearch() {
      this.formSearch.pageNum = 1
      this.formSearch.pageSize = 10
      this.changeQuery()
      this.getAdminUserList()
    },
    addUser() {
      this.$refs.AddEditDialog.open()
    },
    editUser(row) {
      this.$refs.AddEditDialog.open(row)
    },
    formatGender(row) {
      const gender = CONST.GENDER_LIST.find(item => item.id === row.gender)
      return gender ? gender.gender_name : ''
    },
    formatRole(row) {
      const gender = CONST.GENDER_LIST.find(item => item.id === row.gender)
      return gender ? gender.gender_name : ''
    },
    formatStatus(row) {
      const gender = CONST.GENDER_LIST.find(item => item.id === row.gender)
      return gender ? gender.gender_name : ''
    },
    // changeStatus(row) {
    //   this.$prompt('确定要进行此次操作么？请输入『确定』', '温馨提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消'
    //   }).then(async({ value }) => {
    //     if (value === '确定') {
    //       try {
    //         this.isLoading++
    //         await updateOneUserById({
    //           id: row.id,
    //           status: row.status === 1 ? -1 : 1
    //         })

    //         await this.getAdminUserList()
    //       } finally {
    //         this.isLoading--
    //       }
    //     } else {
    //       this.$message.error('输入错误')
    //     }
    //   })
    // },
    async getAdminUserList() {
      try {
        this.isLoading++
        const { user_id, mobile, pageNum, pageSize } = this.formSearch
        const res = await getAdminUserList({
          id: user_id ? Number.parseInt(user_id) : null,
          mobile: mobile || null,
          pageNum: Number.parseInt(pageNum),
          pageSize: Number.parseInt(pageSize)
        })
        this.total = res.total
        this.userList = res.list
      } finally {
        this.isLoading--
      }
    },
    indexMethod(index) {
      return index + 1 + (this.formSearch.pageNum - 1) * this.formSearch.pageSize
    },
    handleSizeChange(val) {
      this.formSearch.pageNum = 1
      this.formSearch.pageSize = val
      this.changeQuery()
      this.getAdminUserList()
    },
    handleCurrentChange(val) {
      this.formSearch.pageNum = val
      this.changeQuery()
      this.getAdminUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
